<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>订单</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
	
		<style type="text/css">
			#index {
				margin-top: 0.4rem;
			}
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
			/* 卡片内容加边距 */
			.my-cont{
				padding:.2rem .99rem;
				text-align:center
				
			}
			/* 背景色白色 */
			.page, .page-group{
				background-color: white;
			}
			/* 去掉卡片边距 */
			.card{
				/* margin: 0; */
			}
			.card-content{
				margin: 0.625rem;
			}
			/* 用户字体 */
			.list-block .my-user{
				font-size :0.6rem;
				color:rgb(150,150,150);
			}
			/* 头像圆角 */
			.my-photo img{
				border-radius: 1rem;
			}
			/*商品*/
			.commodity-title{
				font-weight: bold;
				font-size: medium;
			}
			.commodity-price{
				font-weight: bold;
				color: red;
				padding-right: 5rem;
				font-size: medium;
			}
			/* 用户 */
			.user-name{
				font-size :0.6rem;
				color:gray;
			}
			.leavemessage{
				font-size :0.6rem;
			}
			.link{
				font-size :0.6875rem;
				font-weight: bold;
			}
			#address{
				color:gray;
				font-size :0.75rem;
			}
			.blod{
				font-weight: bold;
			}
			#orderinfo1{
				color:gray;
				font-size :0.6rem;
			}
			#orderinfo2{
				color:gray;
				font-size :0.6rem;
			}
			#orderinfo3{
				color:gray;
				font-size :0.6rem;
			}
			a,a:hover,a:active{
				color: #000000;
			}
			/* 跳转连接颜色 */
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
			/* 卡片主内容左右边距 */
			.my-data{
				padding-right: 7rem;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app" >
			<!-- 标题栏 -->
			<header class="bar bar-nav" style="background-color: yellow;"> 
				<a class="icon icon-left button button-link pull-left" @click="goBack" style="color: black;"></a>
			</header>
			
			<!-- 工具栏 -->
			<nav class="bar bar-tab" style="background-color: white;" v-if="loginuser!=null&&order!=null">
				<div class="" style="width: 5rem;float: right;margin-right: 0.625rem;">
					<!-- 判断登录用户的角色 -->
					<template v-if="order.senduserId==loginuser.id">
						<!-- 订单状态判断，0为已下单，1为已支付，2为已签收，3为已评价 -->
						<a v-if="order.status==0" href="#" class="button button-big button-fill " style="background-color: yellow;color: #000000;">
							待对方支付
						</a>
						<a v-if="order.status==1" href="#" class="button button-big button-fill " style="background-color: yellow;color: #000000;">
							待对方签收
						</a>
						<a v-if="order.status==2" href="#" class="button button-big button-fill " style="background-color: yellow;color: #000000;">
							待对方评价
						</a>
						<a v-if="order.status==3" class="button button-big button-fill " style="background-color: yellow;color: #000000;">
							交易完成
						</a>
					</template>
					<template v-else>
						<!-- 订单状态判断，0为已下单，1为已支付，2为已签收，3为已评价 -->
						<a v-if="order.status==0" @click="goPay" class="button button-big button-fill " style="background-color: #4CD964;color: #000000;">
							去支付
						</a>
						<a v-if="order.status==1" @click="goSign" class="button button-big button-fill " style="background-color: yellow;color: #000000;">
							确认签收
						</a>
						<a v-if="order.status==2" @click="goAppraise" class="button button-big button-fill " style="background-color: yellow;color: #000000;">
							发布评价
						</a>
						<a v-if="order.status==3" class="button button-big button-fill " style="background-color: yellow;color: #000000;">
							交易完成
						</a>
					</template>
				</div>
			</nav>
			
			<!-- 页面内容 -->
			<div class="content" v-if="order!=null">
				<!-- 主内容 -->
				<div class="list-block">
					<div class="card list-container">
						<div class="list-block media-list inset ">
						  <div class="item-inner">
							<div class="item-title" style="margin-left:10px">{{status}}</div>
						  </div>
						</div>
					</div>
					<div class="card list-container">
						<div class="list-block media-list inset ">
							<ul>
							  <li>
								  <a href="#" @click="goCommodity(order.commodityId)">
									  <div class="item-content">
										<div class="item-media">
											<img :src="imgSrc(order.commodity.picture)" style='width: 3rem;'>
										</div>
										<div class="item-inner">
											<div class="item-subtitle">{{order.commodity.title}}</div>
										</div>
									  </div>
								  </a>
								  <div class="item-content">
									  <div class="item-inner">
										<div class="item-subtitle">
											付款：<span class="">￥{{order.sumprice-order.freight}}</span>
										</div>
										<div class="item-subtitle">
											运费：<span class="">￥{{order.freight}}</span>
										</div>
										<div class="item-subtitle blod">
											实付款：<span class="commodity-price">￥{{order.sumprice}}</span>
										</div>
									  </div>
								  </div>
							  </li>
							</ul>
						</div>
					</div>
					<div class="card list-container">
						<div class="list-block media-list inset ">
							<ul>
							  <li>
								  <div class="item-content">
									  <div class="item-inner">
										<div class="item-subtitle blod">
											收货地址:&nbsp;&nbsp;&nbsp;{{order.buyuser.name}}&nbsp;&nbsp;&nbsp;{{order.buyuserPhone}}
										</div>
										<div class="item-input">
										  <input id="address" type="text" readonly="readonly" :value="order.buyuserAddress">
										</div>
									  </div>
								  </div>
							  </li>
							</ul>
						</div>
					</div>
					<div class="card list-container">
						<div class="list-block media-list inset ">
							<ul>
							  <li>
								  <div class="item-content">
									  <div class="item-inner">
										<div class="item-subtitle blod">
											订单信息
										</div>
										<div class="item-input" v-if="loginuser!=null&&order!=null">
											<template v-if="order.senduserId==loginuser.id">
												  <input id="orderinfo1" readonly="readonly" type="text" :value=`买家昵称:${order.buyuser.nickname}`>
											</template>
											<template v-else>
												<input id="orderinfo1" readonly="readonly" type="text" :value=`卖家昵称:${order.senduser.nickname}`>
											</template>
										  <input id="orderinfo2" readonly="readonly" type="text" :value=`订单编号:${order.id}`>
										  <input id="orderinfo3" readonly="readonly" type="text" :value=`交易时间:${order.date}`>
										</div>
									  </div>
								  </div>
							  </li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src="../js/config.js"></script>
		
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		
		<script>
			//获取URL参数
			var loginuserid = getUrlParam('loginuserid');
			var orderid = getUrlParam('orderid');
			
			//VUE
			var app = new Vue({
				el:"#app",
				data:{
					loginuser:null,
					order:null,
					status:null,
					appraise:{
						receiveuserId:null,
						senduserId:null,
						commodityId:null,
						appraise:null
					}
				},
				created() {
					//初始加载用户
					this.inituser();
					//初始加载订单信息
					this.initorder();
				},
				// 方法
				methods:{
					inituser: function() {
						axios.get(serviceIP+"/market/inituser?userid=" + loginuserid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.loginuser = result.data.data;
							//alert(result.data.data.id);
						});
					},
					initorder: function() {
						axios.get(serviceIP+"/market/searchorder?orderid=" + orderid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.order = result.data.data;
							//alert(result.data.data);
							//给状态显示语句赋值
							if(this.order.status==0){
								this.status="订单已生成"
							}else if(this.order.status==1){
								this.status="物流发货，等待签收"
							}else if(this.order.status==2){
								this.status="已签收，等待评价"
							}else if(this.order.status==3){
								this.status="交易完成"
							}
						});
					},
					
					//跳转上层打开页面
					goBack:function(){
						window.history.go(-1)
					},
					//图片映射
					imgSrc: function(src) {
						return src;
					},
					//跳转商品页
					goCommodity:function(id){
						window.location="market-commodity.html?commodityid="+id
					},
					//去支付
					goPay:function(){
						window.location="market-pay.html?orderId="+orderid
					},
					//签收
					goSign:function(){
						// alert("aaa")
						var _this = this;
						$.confirm('确定签收？', function() {
							axios.get(serviceIP+"/market/signorder?orderId="+orderid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
							}).then(result => {
								if (result.data.code == 200) {
									$.toast("已签收！");
									_this.order.status=2;
									this.initorder();
								} else {
									$.toast("连接失败，请重试");
								}
							});
						});
					},
					//发布评价
					goAppraise:function(){
						var _this = this;
						// alert("bbb")
						$.prompt('发送留言到星球？', function (value) {
							if(value==null||value==""){
								$.toast("请输入评价后发送");
							}else{
								_this.appraise.appraise=''+value;
								if(loginuserid==_this.order.senduserId){
									_this.appraise.receiveuserId=_this.order.buyuserId;
								}else{
									_this.appraise.receiveuserId=_this.order.senduserId;
								}
								_this.appraise.senduserId=loginuserid;
								_this.appraise.commodityId=_this.order.commodityId;
								//$.alert("ccc");
								axios.get(serviceIP+"/market/putappraise", {
									params: {
										appraise: JSON.stringify(_this.appraise),
										orderId:orderid
									},
									headers:{"token":token,"refreshtoken":refreshtoken}
								}).then(result => {
									if (result.data.code == 200) {
										$.toast("发布成功");
										//window.location="market-commodity.html?commodityid="+commodity.id
										_this.order.status=3;
										this.initorder();
									} else {
										$.toast("啊呀评论被吞掉啦，请重试");
									}
								});
							}
						});
					},
					
				},
			});
		</script>
		
		<script>
			$.init();
		</script>
	</body>

</html>
